<template>
  <div class="face-result">
      <div class="content">
          <img class="face" src="~@/assets/imgs/face_fail.png" alt="">
          <div class="result">
              Recognition failed
          </div>
      </div>
      <div class="tips">{{tips}}</div>
      <div class="footer">
        <!-- {{faceMode}} -->
        <button v-if="mode=='avatar'" @click="submint">Upload avatar</button>
        <button v-if="mode=='back'" @click="submint">Return</button>
      </div>
  </div>
</template>
<script>
  export default{
      props:{
        tips:{
          default:'Please take another photo'
        },
        mode:{
          default:'avatar'
        }
      },
      data(){
          return {

          }
      },
    methods:{
      submint(){
        this.$emit('submint',this.mode)
      }
    }
  }
</script>
<style lang="scss" scoped>
.face-result{
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100vw;
  height: 100vh;
  background: #fff;
  text-align: center;
  padding-top: 300px;
  padding: 344px 40px 0;
  .footer{
      height: 100px;
      width: 100%;
      margin-top: 200px;
      & > button {
        width: 100%;
        height: 100px;
        border-radius: 8px;
        background-color: #EC5958;
        color: #fff;
        font-size: 36px;
        border-radius: 32px;
      }
  }
  .tips{
    font-size: 32px;
    color: #666;
    font-weight: 400;
    margin-top: 32px;
    text-align: center;
  }
  .content{
      .face{
        width: 200px;
      }
      .result{
          margin-top: 48px;
          color: #FF4651;
          font-size: 40px;
          font-weight: bold;
      }
      .result:after{
          content: '';
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
          // background: url(~@/assets/imgs/icon/icon_warn.png) no-repeat center;
          background-size: 100% 100%;
          width: 36px;
          height: 36px;
      }
      
  }
}
</style>